<!-- 到期设备 -->
<template>
  <div class="app-container" ref="documentAssistant">
    <div class="titleMolde">日志管理
    </div>
    <div class="Filters">
      <el-input v-model="queryParams.module" style="width: 130px" placeholder="模块" />
      <!-- <el-input v-model="queryParams.operation" style="width: 130px" placeholder="操作" /> -->
      <el-input v-model="queryParams.content" style="width: 130px" placeholder="操作内容" />
      <el-input v-model="queryParams.ip" style="width: 130px" placeholder="IP" />
      <el-input v-model="queryParams.type" style="width: 130px" placeholder="类型" />

      <!-- <el-select v-model="queryParams.module" placeholder="Select" style="width: 100px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select> -->
      <el-button type="primary" class="mrg-lf-10" @click="handleQuery">搜索</el-button>

      <!-- <el-button type="primary" class="mrg-lf-10" v-hasPerm="['account:assignmentId']">赋值ID</el-button> -->
      <el-button type="primary" class="mrg-lf-10" v-hasPerm="['account:ExportExcel']">导出Excel</el-button>
    </div>
    <el-table v-loading="loading" :data="pageData" :max-height="tableHeight">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="账号" align="center" prop="username" />
      <el-table-column label="模块" align="center" prop="module" />
      <el-table-column label="ip" align="center" prop="ip" />
      <el-table-column label="操作内容" align="center" prop="content" />
      <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>

    </el-table>
    <pagination @pagination="handleQuery" v-if="queryParams.pages.total > 0" v-model:total="queryParams.pages.total"
      v-model:page="queryParams.pages.current" v-model:limit="queryParams.pages.size" />
  </div>
</template>

<script setup lang="ts">
import type { TabsPaneContext } from "element-plus";
import LogAPI, { LogPageVO, LogPageQuery } from "@/api/log";

let tableHeight = ref(600);
const loading = ref(false);
const removeIds = ref([]);
let pageData = ref()
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
// 获取单个documentAssistant
const documentAssistant = ref<HTMLElement | null>(null);


/** 用户查询参数  */
const props = defineProps({
  ld: {
    type: String,
    required: true,
  },
});
let customerId=props.ld
// 监听 message 的变化 
watch( () => props.ld, (newMessage, oldMessage) => { 
  console.log(66666666,newMessage, oldMessage);
  if(newMessage!== oldMessage){
    console.log('chengg');
    queryParams.customerId = newMessage
    handleQuery()
  }
  
} );
let queryParams = reactive<LogPageQuery>({
  "pages": {
    "current": 1,
    "size": 10,
    "startTime": "",
    "endTime": "",
    "orders": [
      {
        "column": "",
        "asc": true
      }
    ]
  },
  customerId:customerId,

  "module": undefined,
  "operation": undefined,
  "content": undefined,
  "type": undefined,
  "ip": undefined,
});
/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

function cleanQueryParams(params:any) {
  const cleanedParams = { ...params };
  // 只检查顶层属性
  for (const key in cleanedParams) {
    if (typeof cleanedParams[key] !== 'object' && (cleanedParams[key] === undefined || cleanedParams[key] === "")) {
      delete cleanedParams[key];
    }
  }
  return cleanedParams;
}
/** 查询 */
function handleQuery() {
  loading.value = true;
  const filteredParams = cleanQueryParams(queryParams);
  LogAPI.getPage(filteredParams)
    .then((data) => {
      pageData.value = data.records;
      queryParams.pages.total = data.total;
      queryParams.pages.current = data.current;
      console.log('分页', data);
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  handleQuery();
  tableHeight.value = (documentAssistant.value as HTMLElement).clientHeight - 65 - 24 - 52 - 20;

});
</script>
<style lang="scss" scoped>
.mrg-lf-10 {
  margin-left: 10px;
}

.titleMolde {
  font-weight: bold;
  position: relative;
  display: flex;
  padding-left: 15px;
  justify-content: space-between;
  align-items: center;

  &::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    left: 4px;
    top: 6px;
    background: #2cdfe5b5;
  }

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #09e0e7;
    position: absolute;
    left: 0;
    top: 2px;
  }

}

.app-container {
  position: relative;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;

  .allTabContent {
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 0;

    div {
      margin-left: 26px;
      font-weight: 700;

      span {
        margin-left: 8px;
      }
    }
  }
}

.Filters {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #5cadff;
    --el-border-radius-base: 16px;
  }

  &>div {
    margin-right: 5px;
  }
}
</style>
